<template lang="html">
    <div class="train-list">
        <nav-header></nav-header>
        <div class="zh-table">
        <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
            <div class="open-width" v-if="user_level === 0">
                <el-cascader
                :options="positions"
                v-model="selectedPositions"
                @change="positionChange">
                </el-cascader>
            </div>
            <div class="open-width" v-if="user_level === 0" style="width: 100px">
                <el-select v-model="school" filterable placeholder="选择学校" @visible-change="getSchool" :loading="school_loading">
                <el-option v-for="(sch,schInx) in schoolList" :key="sch.id" :label="sch.name" :value="sch.id"></el-option>
                </el-select>
            </div>
            <!-- <div style="display: inline-block;" v-if="user_level === 0">
                <div class="open-width" style="width: 100px">
                <el-select class="selBox" filterable v-model="form.city" placeholder="选择城市" @visible-change="getCity" @change="form.school = ''" :loading="city_loading">
                    <el-option v-for="(city,cityInx) in cityList" :label="city.name" :value="city.id" :key="city.id"></el-option>
                </el-select>
                </div>
                <div class="open-width" style="width: 100px">
                <el-select class="selBox" v-model="form.area" filterable placeholder="选择地区" @visible-change="getArea" @change="form.school = ''" :loading="area_loading">
                    <el-option v-for="(area,areaInx) in areaList" :label="area.name" :value="area.id" :key="area.id"></el-option>
                </el-select>
                </div>
                <div class="open-width" style="width: 100px">
                <el-select class="selBox" v-model="form.position" filterable placeholder="选择街/镇" @visible-change="getPosition" @change="form.school = ''" :loading="position_loading">
                    <el-option v-for="(pos,posInx) in positionList" :label="pos.name" :value="pos.id" :key="pos.id"></el-option>
                </el-select>
                </div>
                <div class="open-width" style="width: 100px">
                <el-select v-model="form.school" placeholder="选择学校" filterable @visible-change="getSchool" :loading="school_loading">
                    <el-option v-for="(sch,schInx) in schoolList" :key="sch.id" :label="sch.name" :value="sch.id"></el-option>
                </el-select>
                </div>
            </div> -->
                        <div class="open-width" :style="user_level === 0 ? 'width: 114px' : ''">
                            <el-input placeholder="培训名 创建人名" v-model="keyword" @keyup.enter.native="searchList"></el-input>
                        </div>
                        <el-button type="primary" @click="searchList">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </div>
                    <div class="zh-open-right fr">
            <el-button type="primary" @click="tolink('/teaching/train/train-add')">添加培训</el-button>
                        <el-button type="primary" @click="exportExcel">导出Excel</el-button>
                        <el-button type="danger" @click="delAll">批量删除</el-button>
                    </div>
                </div>
        <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <el-table
                        :data="listData"
                        border
                @selection-change="selChange"
                        max-height="549"
                        style="width: 100%">
                        <el-table-column
                fixed
                        type="selection"
                        width="50"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="培训名称"
                        align="center"
                width="260"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                            v-if="user_level === 0"
                        prop="position_name"
                        label="地区"
                        align="center"
                            width="234"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                            v-if="user_level === 0"
                        prop="school_name"
                        label="学校"
                        align="center"
                        width="200"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="studyname"
                        label="学段"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="subjectname"
                        label="学科"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                prop="createname"
                label="创建人"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="start_time"
                label="开始时间"
                align="center"
                width="160"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="create_time"
                label="创建时间"
                align="center"
                width="160"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="usercount"
                label="参与人数"
                align="center"
                width="120"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                fixed="right"
                prop="trainid"
                label="操作"
                align="center"
                width="250"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <el-button type="text" @click="toEdit(scope.$index)">编辑</el-button>
                    <el-button type="text" @click="toDetails(scope.$index)">查看</el-button>
                    <el-button type="text" @click="toCount(scope.$index)">统计</el-button>
                    <el-button type="text" class="delete-button" @click="delCur(scope.$index)">删除</el-button>
                </template>
                </el-table-column>
                    </el-table>
                    <div class="table-pagination" v-show="total_number > 10">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page_index"
                            :page-size="listParam.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
import global from '../../../tools/global';
    export default {
    data() {
        return {
            loading:{
                status:false,
                txt:'获取数据...',
            },
            user_level: sessionStorage.getItem('user_level') == 'undefined' ? undefined : JSON.parse(sessionStorage.getItem('user_level')),
            listData: [],
            listParam: {
                app_code: JSON.parse(sessionStorage.getItem('user_info_str')).app_code,
                userid: global.user_id,/*登录者id*/
                is_export: 0,/*是否需要导出*/
                keyword: '',/*关键词*/
                page_index: 1,/*第几页*/
                page_size: 10,/*多少条*/
            },
            keyword: '',
            total_number: 0,/*总条数 */
            delIds: [],
            positions: [],/*地区列表 */
            selectedPositions: [],/*选择的地区*/
            area: '',
            school_loading: false,
            schoolList: [],/*学校 */
            school: '',
            rowLen: 0,
        }
    },
    mounted() {},
    created() {
        this.getList();
        if(Object.is(this.user_level,0)) {
            this.getPositions();
        }
    },
    methods: {
        getPositions() {/*获取地区 */
        const success = (res => {
            this.positions.push(res.data);
        })
        this.$ajax.get('api/level/get_tree',{params: {}, func: {success: success}})
        },
        positionChange(val) {
        this.area = val[val.length-1];
        this.schoolList = [];
        this.school = '';
        },
        /**
         * 获取学校
         * @param {Boolean} flag 下拉框收起/展开
         */
        getSchool(flag) {
        if(!flag || !this.area) {
            return
        }
        this.school_loading = true;
        let params = {
            id: this.area
        };
        const success = (res => {
            this.school_loading = false;
            this.schoolList = res.data;
        })
        this.$ajax.get('api/level/get_school_by_postionid',{params: params, func: {success: success}})
        },
        getList() {
        this.loading.status = true;
            let params = this.listParam;
 
            const success = (res => {
                this.loading.status = false;
                this.listData = res.data.data;
                this.total_number = parseInt(res.data.data_sum);
            })
            this.$ajax.get('api/Train/train_list',{params: params, func: {success: success}})
        },
        searchList() {
            this.listParam.keyword = this.keyword;
            this.listParam.page_index = 1;
            if(Object.is(this.user_level,0)) {
                this.listParam = Object.assign({}, this.listParam, {
                zone: this.area,
                school: this.school
                })
            }
            this.getList();
        },
        reset() {
            if(Object.is(this.user_level,0)) {
                this.positions = [];
                this.selectedPositions = [];
                this.schoolList = [];
                this.area = '';
                this.school = '';
                this.listParam = Object.assign({}, this.listParam, {
                    zone: '',
                    school: ''
                })
                
                this.getPositions();
            }

            this.keyword = '';
            this.listParam = {
                app_code: JSON.parse(sessionStorage.getItem('user_info_str')).app_code,
                userid: global.user_id,/*登录者id*/
                is_export: 0,/*是否需要导出*/
                keyword: '',/*关键词*/
                page_index: 1,/*第几页*/
                page_size: 10,/*多少条*/
            }
            this.getList();
        },
        handleSizeChange(size) {
        this.listParam.page_size = size;
        this.getList();
        },
        handleCurrentChange(size) {
        this.listParam.page_index = size;
        this.getList();
        },
        tolink(link) {
        this.$router.push(link);
        },
        toEdit(inx) {
        let trainid = this.listData[inx].trainid;
        this.tolink('/teaching/train/train-edit?trainid=' + trainid);
        },
        toDetails(inx) {
        let trainid = this.listData[inx].trainid;
        this.tolink('/teaching/train/train-details?trainid=' + trainid);
        },
        toCount(inx) {
        let trainid = this.listData[inx].trainid;
        this.tolink('/teaching/train/train-count?trainid=' + trainid);
        },
        selChange(vals) {
        if(vals.length > 0) {
            vals.forEach(ele => {
            this.delIds.push(ele.trainid)
            })
        } else {
            this.delIds = [];
        }
        },
        delAll() {
            if(this.delIds.length <= 0) {
                this.$message.warning('请选择需要删除的培训');
                return;
            }
            let yes = ( data => {
                this.rowLen = this.delIds.length;
                this.del();
            })
            let cancel = ( data => {})
            this.e_confirm({yes:yes,cancel:cancel,txt:'确定删除吗？'});
        },
        delCur(inx) {
            let yes = ( data => {
                this.delIds = [this.listData[inx].trainid];
                this.rowLen = 1;
                this.del();
            })
            let cancel = ( data => {})
            this.e_confirm({yes:yes,cancel:cancel,txt:'确定删除吗？'});
        },
        del() {
            let params = {
                train_id: [... new Set(this.delIds)],
                user_id: global.user_id
            }
            const success=res=>{
                this.$message.success(res.msg);
                this.delIds = [];

                if (this.listData.length - this.rowLen === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index-- ;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.getList();
            }

            this.$ajax.delete('api/Train/train', {params: params, func: {success: success}})
        },
        exportExcel() {
            if( this.listData.length === 0 ){
                this.$message.warning("暂无数据！")
                return false;
            }

            this.export_excel('api/Train/input_train_excel', this.listParam, '培训列表');
        },
    },
    }
</script>

<style lang="scss">
.train-list {

}
</style>
